/** @jsx jsx */
import { jsx, css, Global, keyframes, ThemeProvider } from '@emotion/react';
const theme = {
  colors: {
    primary: 'blue',
    warning: 'orange',
    danger: 'red'
  }
}
function App() {
  return (
    <ThemeProvider theme={theme}>
      <div css={theme => ({ color: theme.colors.danger })}>
        some other text
      </div>
    </ThemeProvider>
  )
}

export default App

//Component selectors can only be used in conjunction with @emotion/babel-plugin.
//告诉babel.在转译的时候，把jsx转换jsx方法调用
//jsx <h1>hello</h1> => React.createElement('h1',null,'hello');
//                   -> jsx('h1',{children:'hello'});